<template>
  <view class="box message-root" :style="fullStyle">
    <top-back-image-container :image-path="`${baseFilePath}/home/publicMessage.png`"
                              :content-text="liaisonName"></top-back-image-container>
    <view :class="tabIndex === 0 ? ['content'] : ['content', 'full']">
      <!-- 我要留言 begin -->
      <view class="content-item-1">
        <view class="tabbar">
          <view class="item" v-for="(item, index) in tabList" :key="index"
                :class="{ active: tabIndex === index }" @tap="switchTab(index)">
            {{ item }}
            <view class="underline" :style="{ border: tabIndex === index ? '2px solid #ad2325' : '0' }">
            </view>
          </view>
        </view>
        <swiper class="message-swiper" :current="tabIndex" :duration="300" :show-scrollbar="false">
          <swiper-item class="news-list" v-for="(item, index) in tabList" :key="index">
            <view class="row message" v-if="index === 0">
              <!-- form begin -->
              <uni-forms :modelValue="leaveAMessageFrom" :ref="leaveAMessageFromRefName" :rules="rules">
                <uni-forms-item name="messageType" required>
                  <uni-data-select :localdata="messageTypes" v-model="leaveAMessageFrom.messageType"
                                   placeholder="请选择留言类型"></uni-data-select>
                </uni-forms-item>
                <uni-forms-item name="realName" required>
                  <uni-easyinput v-model="leaveAMessageFrom.realName" type="text" placeholder="请输入真实姓名"/>
                </uni-forms-item>
                <uni-forms-item name="phone" required>
                  <uni-easyinput v-model="leaveAMessageFrom.phone" type="text" placeholder="请输入联系电话"/>
                </uni-forms-item>
                <uni-forms-item name="messageContent" required>
                  <uni-easyinput :maxlength="1000" v-model="leaveAMessageFrom.messageContent" type="textarea"
                                 placeholder="请输入内容"/>
                </uni-forms-item>
              </uni-forms>
              <!-- form end -->
            </view>
            <view class="row history-message-list" v-else>
              <historical-message :representative-field-name="representativeFieldName" :dialogue-submit-url="SEND_MESSAGE"
                                  :dialogue-query-url="GET_LIAISON_MESSAGE_SESSION"
                                  :query-url="QUERY_LIAISON_MESSAGE_HISTORY" style="width: 100%"></historical-message>
            </view>
          </swiper-item>
        </swiper>
      </view>
      <!-- 我要留言 end -->
    </view>
    <!-- form-submit begin -->
    <view class="footer" v-if="tabIndex === 0">
      <button @click="submitLeaveAMessage" type="button">确认提交</button>
    </view>
    <!-- form-submit end -->
  </view>
</template>

<script>
import {getDictByConde} from "@/until/dictUtil";
import {baseMixins} from "@/mixins/baseMixins";
import {getQueryHeaders} from "@/until/userLogin";
import {
  ADD_LIAISON_MESSAGE,
  GET_LIAISON_MESSAGE_SESSION,
  QUERY_LIAISON_MESSAGE_HISTORY,
  SEND_MESSAGE
} from "@/api/message";
import {baseApiUrl, messagePath, successPagePath} from "@/until/publicConfig";
import historicalMessage from "@/compontent/historicalMessage/index.vue";
import TopBackImageContainer from "@/compontent/topBackImageContainer/index.vue";
import {requestPost} from "@/until/means/request";

export default {
  mixins: [baseMixins],
  components: {
    historicalMessage,
    TopBackImageContainer,
  },
  data() {
    return {
      representativeFieldName:'liaisonId_dictText',
      GET_LIAISON_MESSAGE_SESSION,
      SEND_MESSAGE,
      tabIndex: 0,
      tabList: [
        "我要留言",
        "历史留言",
      ],
      liaisonName: '',
      leaveAMessageFrom: {
        liaisonId: "",
        messageContent: "",
        messageType: "",
        phone: "",
        realName: ""
      },
      rules: {
        messageType: {
          rules: [
            {
              required: true,
              errorMessage: '请选择留言类型',
            }
          ]
        },
        realName: {
          rules: [{
            required: true,
            errorMessage: '请输入真实姓名',
          }]
        },
        phone: {
          rules: [{
            required: true,
            errorMessage: '请输入联系电话',
          }]
        },
        messageContent: {
          rules: [{
            required: true,
            errorMessage: '请输入内容',
          }]
        }
      },
      leaveAMessageFromRefName: 'leaveAMessageFromRefName',
      messageTypes: [],
      QUERY_LIAISON_MESSAGE_HISTORY
    }
  },
  async onLoad(params) {
    this.tabIndex = isNaN(parseInt(params.tabIndex)) ? 0 : parseInt(params.tabIndex)
    this.leaveAMessageFrom.liaisonId = params.liaisonId
    this.liaisonName = params.liaisonName
    this.messageTypes = await getDictByConde('liaison_message_type')
  },
  methods: {
    switchTab(index) {
      if (this.tabIndex === index) return;
      this.tabIndex = index;
    },
    submitLeaveAMessage() {
      let [{leaveAMessageFromRefName, leaveAMessageFrom}, owner] = [this, this]
      this.$refs[leaveAMessageFromRefName][0].validate().then(res => {
        requestPost({
          url: ADD_LIAISON_MESSAGE, //仅为示例，并非真实接口地址。
          data: leaveAMessageFrom,
          header: getQueryHeaders(),
        }).then(() => {
          uni.redirectTo({url: `${successPagePath}?liaisonId=${leaveAMessageFrom.liaisonId}&backPath=${messagePath}&historyPath=${messagePath}`})
        });
      }).catch(err => {
      })
    }
  }
}
</script>

<style lang='scss' scoped>
.message-root {
  overflow: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  background-color: $bg-color-white;

  .content {
    height: calc(100% - 420rpx);
    padding: 0 30rpx;
    color: #222222;
    background: #F8F8F8;
    box-sizing: border-box;

    &.full {
      height: calc(100% - 300rpx);
    }

    .content-item-1 {
      height: 100%;
      overflow: auto;

      .tabbar {
        display: flex;
        justify-content: space-around;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        padding: 20rpx 0;

        .item {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          font-size: $font-size-lg;
          padding: 0 10rpx;
        }

        .underline {
          width: 40%;
          height: 6rpx;
          margin-top: 10rpx;
          border-radius: 15px
        }

        .active {
          color: #ad2325;
        }
      }

      .news-list {
        overflow: auto;
        padding-bottom: 30rpx;
        box-sizing: border-box;
      }

      .message-swiper {
        height: calc(100% - 100rpx);
      }

      .message {
        width: 100%;
        margin: 50rpx 0;
        padding: 0 30rpx;
      }

      .history-message-list {
        height: 100%;
        width: 100%;
        display: flex;
        color: #222222;
      }
    }

  }

  .footer {
    height: 120rpx;
    padding: 10rpx 50rpx;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #FFFFFF;
    z-index: 10;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);

    button {
      width: 100%;
      height: 80%;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 50rpx;
      color: #FFFFFF !important;
      background: linear-gradient(to bottom, #FA4D37, #C01600) !important;
    }
  }
}


</style>
